<template>
	<div class="content">
		<h1>动态列表 </h1>
		<div class="NewBtn">
			<el-button type="primary" @click='Add'>新增动态</el-button>
		</div>
		<div class="TableBox">
			<el-table :data="arr" style="width: 100%">
				<el-table-column prop="type_id" label="展现形式" width="180">
				</el-table-column>
				<el-table-column prop="imgpath" label="图一" width="180">
					<!--插入图片链接的代码-->
					<template slot-scope="scope">
						<img :src="scope.row.img_url1" alt="" style="width: 50px;height: 50px">
					</template>

				</el-table-column>
				<el-table-column prop="price" label="图二" width="180">
					<template slot-scope="scope">
						<img :src="scope.row.img_url2" alt="" style="width: 50px;height: 50px">
					</template>
				</el-table-column>
				<el-table-column prop="education" label="图三" width="180">
					<template slot-scope="scope">
						<img :src="scope.row.img_url3" alt="" style="width: 50px;height: 50px">
					</template>
				</el-table-column>
				<el-table-column prop="" label="操作" width="120">
					<template slot-scope="scope">
						<el-dropdown>
							<el-button type="primary">
								更多<i class="el-icon-arrow-down el-icon--right"></i>
							</el-button>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item @click.native="Edit2(scope.$index,arr)">
									<div>编辑</div>
								</el-dropdown-item>
								<el-dropdown-item @click.native="Rise(scope.$index,arr)">上升</el-dropdown-item>
								<el-dropdown-item @click.native="Decline(scope.$index,arr)">降序</el-dropdown-item>
								<el-dropdown-item @click.native="Delete(scope.$index,arr)">删除</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<div class="PageBox">
			<el-pagination  :current-page ="ispage"  background layout="prev, pager, next" :total="count" @current-change="Change"></el-pagination>
		</div>
	</div>
</template>

<script>
	import axios from "axios"
	import config from '@/assets/js/config.js'
	import config1 from '@/assets/js/config1.js'
	import img1 from '@/assets/img/upload-1554710471773.jpg'
	//	import img2 from '@/assets/img/yuyue2.jpg'  添加本地路径图片需要引进来
	export default {
		data() {
			return {
				baseUrl: config1.baseUrl,
				list: "",
				count:0,
				page: 0,
				ispage:1,
				arr: [{
						type_id: '三列式',
						imgpath: img1
					}

					//				,{
					//					type_id: '三列式',
					//					imgpath:img1
					//				},{
					//					type_id: '三列式',
					//					imgpath:img1
					//				},{
					//					type_id: '三列式',
					//					imgpath:img1
					//				},{
					//					type_id: '三列式',
					//					imgpath:img1
					//				}
				]
			}
		},
		methods: {
			Edit2(index, rows){
				var id = rows[index].id;
				console.log(id)
				var token = this.$store.state.token;
				console.log(token)
				var baseUrl = 'http://yaochiwan2.bluej.cn';
				this.$require.get(baseUrl + "/dynamic/find", {
					params: { //get请求传后台数据需要pararms				
						id: id
					}
				}).then((res) => {
					console.log(11111111)
					console.log("请求成功", res);  
					console.log(this.page)				 					
					this.$router.push({
						name: "Dedit",
						query: {				
							id:id,
							res: res,
							page:this.page+1
						}
					})
				}).catch((err) => {
					console.log("请求失败", err);
				});
				//				this.$router.push({
				//					path: '/Dedit'
				//				})
			},
			Add() {
				this.$router.push({
					path: '/dyAdd'
				})
			},
			//删除
			Delete(index, rows) {
				var id = rows[index].id;
				console.log(id);
				var token = this.$store.state.token;
				var baseUrl = 'http://yaochiwan2.bluej.cn';
				this.$require.post(baseUrl + "/dynamic/delete", { //$require不能用params
					id: id
				}, {
					headers: {
						Authorization: "Bearer " + this.$store.state.token
					}
				}).then((res) => {
					console.log("请求成功", res);
					this.getlist(this.page);
				}).catch((err) => {
					console.log("请求失败", err);
				});
			},
			//升序
			Rise(index, rows) {
				var orders = rows[index].orders;
				console.log("下标",index)
				console.log("arr",rows)
				console.log(orders)
				var token = this.$store.state.token;
				var baseUrl = 'http://yaochiwan2.bluej.cn';
				this.$require.post(baseUrl + '/dynamic/sort', {
					move: 1,
					orders: orders
				}, {
					headers: {
						Authorization: "Bearer " + this.$store.state.token
					}
				}).then((res) => {
					console.log("请求成功", res);
					this.getlist(this.page);
				}).catch((err) => {
					console.log("请求失败", err)
				})
			},
			//降序
			Decline(index, rows) {
				var orders = rows[index].orders;
				var token = this.$store.state.token;
				var baseUrl = 'http://yaochiwan2.bluej.cn';
				this.$require.post(baseUrl + '/dynamic/sort', {
					move: -1,
					orders: orders
				}, {
					headers: {
						Authorization: "Bearer " + this.$store.state.token
					}
				}).then((res) => {
					console.log("请求成功", res);
					this.getlist(this.page);
				}).catch((err) => {
					console.log("请求失败", err)
				})
			},
			Change(e) {
				console.log(e);
				this.page = e - 1;
				this.getlist(this.page);
			},
			getlist(page) {
				this.$require.get(config1.dynamicList, {
					params: {
						page: this.page
					}
				}).then((res) => {
					console.log(res);
					console.log(res.data.data.rows);
					this.arr = res.data.data.rows
					console.log(this.arr)
					this.count = res.data.data.count;
					console.log(this.count) 
					for(let i = 0; i < this.arr.length; i++) {
						if(this.arr[i].type_id == 1) {
							this.arr[i].type_id = "三列式"
						} else if(this.arr[i].type_id == 2) {
							this.arr[i].type_id = "左大1右2小";
						} else if(this.arr[i].type_id == 3) {
							this.arr[i].type_id = "左2小右大1";
						}
					}
					console.log(this.arr)
				})

			}
		},
		created() {
			this.getlist(this.page);
			console.log(11111111111)
			   console.log(this.$route.query.page)
			      this.ispage=this.$route.query.page
			//			this.$require.get(config1.dynamicList).then((res) => {
			//				console.log(res);
			//				console.log(res.data.data.rows);
			//				this.arr = res.data.data.rows
			//				console.log(this.arr)
			//
			//				for(let i = 0; i < this.arr.length; i++) {
			//					if(this.arr[i].type_id == 1) {
			//						this.arr[i].type_id = "三列式"
			//					} else if(this.arr[i].type_id == 2) {
			//						this.arr[i].type_id = "左大1右2小";
			//					} else if(this.arr[i].type_id == 3) {
			//						this.arr[i].type_id = "左2小右大1";
			//					}
			//				}
			//				console.log(this.arr)
			//			})
			//
			//		}
		}
	}
</script>

<style lang="scss" scoped>
	$htitle:32px; //标题文字大小
	.content{
		width: 100%;
		padding: 0 30px;
		h1 {
			font-size: $htitle;
			margin: 21px 0;
		}
	}
	
</style>